<template>
  <div>
    <el-calendar   v-model="date"  v-if="showDate">
      <template slot="dateCell" slot-scope="{ date, data }">
      <div @click="addDay(data)"  >
        <p :class="data.isSelected ? 'is-selected-1' : ''">
          {{ data.day.split("-").slice(2).join("-") }}
        </p>
        <div style="float: right;"  v-if="isHoliday(data.day)">
             <el-button type="success">有预约</el-button>
        </div>
        <div>

        </div>
      </div>
      </template>
    </el-calendar>

    <el-drawer  :close-on-click-modal="false"   :destroy-on-close="true" :visible.sync="addVisible" size="60%">
      <Reservation :day="day" />
    </el-drawer>

  </div>

</template>

<script>
import Reservation from '@/views/dashboard/admin/components/Reservation'
import { get, post } from '@/api/requestCommon'
import { showAttribute } from '@/api/common'
export default {
  name: 'Calendar',
  components: {
    Reservation
  },
  data() {
    return {
      addVisible: false,
      date: new Date(),
      day: '',
      dayList:[],
      showDate: false
    }
  },
  mounted() {
    this.loadData()
  },


  methods: {
    findMonthDays(year,month){
      post('subscribe/findMonthDays',{year:year,month:month}).then(response=>{
        showAttribute(response,this,'dayList')
      })
    },

    loadData() {
      get('subscribe/findCalendarDay').then(response=>{
        showAttribute(response,this,'dayList')
        this.showDate=true
        this.$nextTick(() => {
          // 点击前一个月
          let prevBtn = document.querySelector(
            '.el-calendar__button-group .el-button-group>button:nth-child(1)');
          prevBtn.addEventListener('click', () => {

            this.findMonthDays(this.date.getFullYear(),this.date.getMonth())
          })
        })


        this.$nextTick(() => {
          // 点击后一个月
          let prevBtn = document.querySelector(
            '.el-calendar__button-group .el-button-group>button:last-child');
          prevBtn.addEventListener('click', () => {
             this.findMonthDays(this.date.getFullYear(),this.date.getMonth())
          })
        })
      })
    },
    addDay(date) {
      this.day=date.day
      this.addVisible=true
    },
    isHoliday(date){
      return this.dayList==null?[].includes(date):this.dayList.includes(date)
    }
  }
}
</script>

<style lang="scss">
  .is-selected-1{
  color: #ffffff !important;
}
.el-calendar-table td.is-selected {
  background-color: #359381 !important;
}

  .el-calendar-table td .el-calendar-day:hover {
    background-color: #359381 !important;
  }
</style>
